<!--
 * @Author: zhangyang
 * @Date: 2022-03-01 11:02:34
 * @LastEditTime: 2022-05-21 19:00:24
 * @Description: 登录页
-->
<script lang="ts" setup>
import { login } from '@/api/user';
import { useLoadingStore, setToken} from '@/stores';
import type { FormInst, FormRules } from 'naive-ui';
import type { CSSProperties } from 'vue';
import logo from '@/assets/img/logo.svg';
import login_background from '@/assets/img/login_background.jpg';
import loginTitleBg from '@/assets/img/login-title-bg.svg';
import type { LoginType } from '@/typings/type';

const title = import.meta.env.VITE_TITLE ?? '小黑后台';

const emit = defineEmits<{
  (e: 'set-bg', styleObj: CSSProperties): void;
}>();
// 修改布局组件的背景
emit('set-bg', {
  backgroundImage: `url('${login_background}')`,
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover'
});
const formRef = ref<FormInst>();
const form = reactive({
  username: 'admin',
  password: '123456'
});
const rules: FormRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
};
const { httpPending } = storeToRefs(useLoadingStore());

/**
 * 路由实例，记录当前路径之类的
 */
const route = useRoute();
const redirect = String(route.query?.redirect ?? '/');
/**
 * 路由器实例，负责改变路由
 */
const router = useRouter();

const loginType = ref<LoginType>('code');
const chaneType = () => {
  if (loginType.value === 'code') {
    loginType.value = 'scan';
  } else {
    loginType.value = 'code';
  }
};
const startLogin = () => {
  formRef.value?.validate(async (err) => {
    if (!err) {
      try {
        const info = await login(form.username, form.password);
        setToken(info);
        router.push(redirect);
      } catch (error) {
        window.$alert.error({
          content: '请仔细检查表单内容！'
        });
        return;
      }
    }
  });
}
</script>

<route lang="yaml">
meta:
  title: 用户登录
  layout: single
  noCache: true
</route>

<template>
  <div class="logo">
    <img :src="logo" />
  </div>
  <div class="login-main" v-bind="$attrs">
    <div class="title">
        <img :src="loginTitleBg" />
        <div class="txt">欢迎使用{{ title }}</div>
    </div>
    <div class="box">
      <NCard hoverable>
        <template #header>
          <div class="type" @click="chaneType">
            <NTooltip v-if="loginType === 'code'" trigger="hover">
              <template #trigger>
                <div class="i-el-qrcode text-gray-500 text-4xl" />
              </template>
              扫码登录
            </NTooltip>
            <NTooltip v-else trigger="hover">
              <template #trigger>
                <div class="i-heroicons-outline:desktop-computer text-gray-500 text-4xl" />
              </template>
              账号密码登录
            </NTooltip>
          </div>
        </template>
        <div class="bg-color-white overflow-hidden">
          <NForm v-if="loginType === 'code'" ref="formRef" :model="form" :rules="rules">
            <div class="relative">
              <div class="text-2xl text-center mb-6 font-bold">账号密码登录</div>
            </div>
            <NFormItem path="username">
              <NInput
                v-model:value="form.username"
                placeholder="请输入用户名"
                tabindex="1"
                auto-complete="on"
                clearable
                autofocus
              />
            </NFormItem>
            <NFormItem path="password">
              <NInput
                v-model:value="form.password"
                placeholder="请输入密码"
                tabindex="2"
                auto-complete="on"
                clearable
                type="password"
                show-password-on="click"
              />
            </NFormItem>
            <div class="my-3">
              <NButton
                :loading="httpPending"
                type="primary"
                attr-type="submit"
                block
                @click="startLogin"
              >登 录</NButton>
            </div>
          </NForm>
          <NForm v-else>
            <div class="relative">
              <div class="text-2xl text-center mb-6 font-bold">扫码登录</div>
              <div class="text-lg text-center mb-8 ">~敬请期待~</div>
              <div class="my-1">
                <div class="i-el-qrcode text-gray-500 text-9xl mx-auto" />
              </div>
              
            </div>
          </NForm>
        </div>
      </NCard>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  @apply absolute left-0 -top-10;
  @apply lg:transform lg:scale-50 lg:-left-60 lg:-top-60;
  @apply xl:-top-52 xl:-left-52; 
}
.login-main {
  @apply w-3/4 h-full flex flex-col lg:flex-row justify-evenly lg:justify-evenly items-center;
  .title {
    @apply hidden text-4xl font-bold font-mono;
    @apply  lg:flex flex-col items-center justify-end relative;
    img {
      @apply transform scale-50;
    }
    .txt {
      @apply absolute bottom-12;
    }
  }
  .box {
    @apply w-9/10 lg:w-1/4;
    .type {
      @apply absolute right-0 top-0 overflow-hidden cursor-pointer;
      $w: 1.6rem;
      $c: #fff;
      &::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        right: 0.1rem;
        border-left: $w solid $c;
        border-right: $w solid transparent;
        border-top: $w solid transparent;
        border-bottom: $w solid $c;
        pointer-events: none;
        z-index: 1;
      }
    }
  }
}
</style>